<template>

	<view class="dynamic" @click="clickDynamic()">
		<view class="user__container">
			<view class="user__header-warp">
				<!-- 头像组 -->
				<view class="user__header" @click.stop="clickUser()">
					<image class="user__header-image" :src="avatar" mode="aspectFill"></image>
				</view>
			</view>
			<view class="user__content">
				<view class="user__content-main">
					<text class="user__content-title uni-ellipsis" @click.stop="clickUser()">{{ name }}</text>
					<text class="user__content-note uni-ellipsis">{{ publishTime }}</text>
				</view>
				<!-- <view class="user__content-extra">
					<slot>
						<text :class="isFocusOn?'user__focus-on':'user__focus-off'"  @click.stop="clickFocus()">{{isFocusOn?'关注':'已关注' }}</text>
					</slot>
				</view> -->
			</view>
		</view>
		<!-- 热点 -->
		<view class=""
			style="display: flex;justify-content: space-between;align-items: center;padding: 5px 0px;position: relative;">
			<scroll-view scroll-x="true" class="scrollView">
				<view class="" style="display: flex;">
					<view v-for="(titem,tindex) in topicList" :key="titem.topicId" class="scrollItem" style="">
						<image src="@/static/ui/jinhao.png" style="width: 20px;height: 20px;margin-left: 5px;"></image>
						<p style="margin-left: 4px;">{{titem.topicTitle}}</p>
					</view>
				</view>

			</scroll-view>

			<view class=""
				style="right:0;color: red;position: absolute;padding:0 10px 0 15px;background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));;">
				<span style="font-size: 30rpx;">￥</span>
				<span style="font-size: 40rpx;font-weight: 700;">{{price}}</span>
			</view>
		</view>



		<view class="text">{{content}}</view>
		<view class="allImage">
			<view class="imgList">
				<view class="images" v-for="(item,index) in imgList" :key="index">
					<image @click.stop="previewImg()" class="oneimg" :src="item" mode="aspectFill"
						:style="{width:imgWidth+'px','max-height':imgHeight+'px'}"></image>
				</view>
			</view>
		</view>
		<view class="operate" :style="'width: 100%;display:'+operateDisplay">
			<!-- <uni-grid :column="3" :showBorder="false" :square="false">
				<uni-grid-item>
			        <span :style="'color:'+thumbsupColor" @click.stop="clickThumbsup()">
						<uni-icons type="redo" size="18" :style="'margin-right: 2px;color:'+thumbsupColor"></uni-icons>
						{{likeNumber?likeNumber:'点赞'}}
					</span>
			    </uni-grid-item>
			    <uni-grid-item>
			        <span :style="'color:'+heartColor"  @click.stop="clickGiveReward()">
						<uni-icons type="star-filled" size="18" :style="'margin-right: 2px;color:'+heartColor"></uni-icons>
						{{giveRewardNumber?giveRewardNumber:'打赏'}}
					</span>
			    </uni-grid-item>
			    <uni-grid-item>
					<span  style="color:gray"   @click.stop="clickChat()">
						<uni-icons type="chat" size="18" style="margin-right: 2px;color:gray"></uni-icons>
						{{chatNumber?chatNumber:'评论'}}
					</span>
			    </uni-grid-item> 
			
			</uni-grid> -->
			<!-- 人 -->
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="display: flex;align-items: center;">
					<image class="" style="width: 20px;height: 20px;border-radius: 15px;" :src="avatar"
						mode="aspectFill"></image>
					<span style="margin-left: 5px;color: #ccc;">1人表态</span>
				</view>
				<view class=""
					style="border-radius: 10px;background-color: aliceblue;display: flex;align-items: center;padding: 2px 10px;">
					<image class="" style="width: 20px;height: 20px;border-radius: 15px;" :src="avatar"
						mode="aspectFill"></image>
					<span>1</span>
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px;">
				<view class="" style="display: flex;align-items: center;">
					<view class="" style="font-weight: 550;">
						<span @click="share()" style="display: flex;align-items: center;">
							<uni-icons type="redo" size="24"></uni-icons>
							<span>分享</span>
						</span>

					</view>
					<view class="" style="margin-left: 15px;font-weight: 550;">
						<span @click.stop="clickTaolun()" style="display: flex;align-items: center;">
							<uni-icons type="chat" size="24"></uni-icons>
							<span>讨论</span>
						</span>
					</view>
					
				</view>

				<!-- 表态框 -->
				<view class="" style="position: relative;">
					<popDialog @onClickPopupItem="onClickPopupItem" :isShow="dialogShow" bottom="40" bgColor="white"
						:list="list">

					</popDialog>
					<view @click="dialogShow = !dialogShow" class="" style="">
						<view class="" v-if="updatebiaotaiFlag === false"
							style="border-radius: 20px;padding: 7px;display: flex;align-items: center;color: white;background-color: black;">
							<view class="iconfont icon-xiaolian" style="margin-right: 6px;padding-left: 5px;"></view>
							<span>表态</span>
						</view>
						<view class="" v-else
							style="border-radius: 20px;padding: 7px;display: flex;align-items: center;"
							:style="{'background-color':updatebiaotaiFlag?'aliceblue':''}">
							<image style="width: 25px;height: 25px;" src="@/static/ali/qiqiu.png" mode=""></image>
							<span style="font-size: 30rpx;font-weight: 1000;margin-left: 5px;">{{popItem.name}}!</span>
						</view>
					</view>

				</view>




			</view>


		</view>
		<view class="bottom-line"></view>
		<!-- 点击特效，类似直播送礼物 -->
		<!-- v-if="updatebiaotaiFlag" -->
		<view class="content"
			style="height: 750rpx;background-color: none;top: 0;left: 0;position: absolute;width: 100%;z-index: -1;">
			<l-svga ref="svga"></l-svga>
		</view>


	</view>
</template>

<script>
	import lSvga from '@/uni_modules/lime-svga/components/l-svga/l-svga.vue'
	import popDialog from '@/uni_modules/luanqing-popup-dialog/components/luanqing-popup-dialog/luanqing-popup-dialog.vue'
	import uniGrid from '@/uni_modules/uni-grid/components/uni-grid/uni-grid.vue'
	export default {
		props: {
			avatar: {
				type: String
			},
			name: {
				type: String
			},
			publishTime: {
				type: String
			},
			topicList: {
				type: Array
			},

			isFocusOn: {
				type: Boolean
			},
			content: {
				type: String
			},
			price: {
				type: String
			},
			imgList: {
				type: Array
			},
			isLike: {
				type: Boolean
			},
			isGiveReward: {
				type: Boolean
			},
			likeNumber: {
				type: Number
			},
			giveRewardNumber: {
				type: Number
			},
			chatNumber: {
				type: Number
			},
			userNoShow: {
				type: Boolean
			},
			operateNoShow: {
				type: Boolean
			},


		},
		components: {
			uniGrid,
			popDialog,
			lSvga
		},
		data() {
			return {
				windowWidth: 0, //屏幕可用宽度
				windowHeight: 0, //屏幕可用高度
				imgWidth: 0, //图片宽度
				imgHeight: 0, //图片高度
				thumbsupColor: 'gray',
				heartColor: 'gray',
				userDisplay: 'block',
				operateDisplay: 'block',
				dialogShow: false,
				list: [{
						url: "../../../../static/gif/heart.gif",
						name: "赞一个"

					},
					{
						url: "../../../../static/gif/gesture.gif",
						name: "有意思"
					},
					{
						url: "../../../../static/gif/xinpusen.gif",
						name: "惊呆了"
					}
				],
				updatebiaotaiFlag: false,
				popItem: {},

			}
		},
		mounted() {


			const res = uni.getSystemInfoSync();
			this.windowHeight = res.windowHeight;
			this.windowWidth = res.windowWidth;

			if (this.userNoShow) {
				this.userDisplay = 'none';
			}

			if (this.operateNoShow) {
				this.operateDisplay = 'none';
			}

			this.judgeImg();
			this.initOperate();
		},
		methods: {
			// 预览图片
			previewImg() {
				uni.previewImage({
					urls: this.imgList,
					longPressActions: {
						itemList: ['保存图片'],

					}
				})
			},
			initOperate() {
				if (this.isLike) this.thumbsupColor = '#fb5f5f';
				if (this.isGiveReward) this.heartColor = '#fb5f5f';
			},
			// 自适应判断
			judgeImg() {
				if (this.imgList.length == 1) {
					this.imgWidth = this.windowWidth * 2 / 3;
					this.imgHeight = this.windowHeight * 3 / 5;
				} else if (this.imgList.length == 4) {
					this.imgWidth = this.windowWidth / 3.3;
					this.imgHeight = this.imgWidth;
				} else {
					this.imgWidth = this.windowWidth / 3.4;
					this.imgHeight = this.imgWidth;
				}
			},
			timestampFormat(timestamp) {
				if (!timestamp) return '';

				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}

				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();

				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			},

			/** 触发父级事件 */
			// 点击讨论
			clickTaolun() {
				this.$emit("clickTaolun")
			},
			share(){
				uni.showToast({
					title: '功能待开发',
					duration: 2000
				});
			},
			//更新表态box
			onClickPopupItem(item) {
				this.updatebiaotaiFlag = true
				this.popItem = item

				this.$refs.svga.render(async (parser, player) => {
					const videoItem = await parser.load(
						"https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/b3875bda-8de0-476d-8f55-d10b24f16d98.svg"
					);
					await player.setVideoItem(videoItem);
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player.loops = 1
					// 开始播放动画，reverse = true 时则反向播放。
					player.startAnimation()
					// 监听动画完成
					player.onFinished(() => {
						console.log('动画结束')
					})
				})



			}

		}
	}
</script>

<style scoped lang="scss">
	/* 想法图片排列样式 */
	.uni-list-chat__content-extra-text {
		color: #007AFF;
	}

	.dynamic {
		width: 100%;
	}

	.allImage {
		display: flex;
		margin-top: 10rpx;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.imgList {
		margin: 0 3%;
	}

	.images:not(:nth-child(3n)) {
		/* margin-right: 10rpx; */
	}

	.text {
		margin: 1% 3% 2%;
	}

	.images {
		margin-right: 10rpx;
		display: inline-block;
	}

	.operate {
		width: 94%;
		padding: 3%;
		font-size: 14px;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.bottom-line {
		border-bottom: 10px solid #efefef;
	}


	.user__container {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		/* -webkit-flex-direction: row; */
		flex-direction: row;
		-webkit-box-flex: 1;
		/* -webkit-flex: 1; */
		flex: 1;
		padding: 10px 15px;
		position: relative;
		overflow: hidden;
	}

	.user__header {
		display: flex;
		width: 45px;
		height: 45px;
		-webkit-border-radius: 5px;
		border-color: #eee;
		border-width: 1px;
		border-style: solid;
		overflow: hidden;
		border-radius: 50px;
	}

	.user__header-image {
		display: flex;
		align-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		flex-wrap: wrap-reverse;
		width: 45px;
		height: 45px;
		border-radius: 5px;
		border-color: #eee;
		border-width: 1px;
		border-style: solid;
		overflow: hidden;
	}

	.user__content {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-flex: 1;
		flex: 1;
		overflow: hidden;
		padding: 2px 0;
	}

	.user__content-main {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding-left: 10px;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		overflow: hidden;
	}

	.user__content-note {
		margin-top: 3px;
		color: #999;
		font-size: 12px;
		font-weight: normal;
		overflow: hidden;
	}

	.user__focus-on {
		padding: 3px 10px;
		border: 1px solid #fb5f5f;
		color: #fb5f5f;
		display: flex;
		font-size: 14px;
		border-radius: 3px;
	}

	.user__focus-off {
		padding: 3px;
		color: gray;
		font-size: 14px;
	}

	@keyframes shake {
		50% {
			transform: translateX(-5px);
		}

		100% {
			transform: translateX(5px);
		}
	}

	.scrollView {
		width: 80%;
		white-space: nowrap;

		.scrollItem {
			// display: inline-block;
			border-radius: 10px;
			background-color: #ccc;
			display: flex;
			padding: 0px 10px 0 0;

		}
	}
</style>